<template>
	<view class="page-wrapper">
		<view class="avatar-box">
			<image @click="changeHeadImg" :src="formData.avatar" class="image" mode="aspectFit"></image>
			<text>{{ $t('pages.petInfo.ProfilePhoto') }}</text>
		</view>
		<view class="form shadow-border">
			<uni-forms ref="valiForm" :modelValue="formData" :border="true" label-width="150">
				<uni-forms-item :label="$t('pages.petInfo.label_Nickname')" required 
					:rules="[{
						required: true,
						errorMessage: $t('pages.petInfo.error_nickName_required'),
					},
					{
						minLength: 1,
						maxLength: 30, 
						errorMessage: $t('pages.petInfo.error_nickName_length'),
					}]" name="nickName" class="section-item">
					<uni-easyinput :clearable="false" :inputBorder="false" v-model="formData.nickName" 
                        :placeholder="$t('pages.petInfo.placeholder_nickname')" />
				</uni-forms-item>
				<uni-forms-item :label="$t('pages.petInfo.label_Breed')" :rules="[
					 { required: true, errorMessage: $t('pages.petInfo.error_breed_required') },
					]" required name="breed" class="section-item">
					<uni-easyinput :clearable="false" @iconClick="chooseBreed" disabled :inputBorder="false" v-model="formData.breedText" 
                        :placeholder="$t('pages.petInfo.placeholder_breed')" suffixIcon="right"/>
				</uni-forms-item>
				<uni-forms-item :label="$t('pages.petInfo.label_Gender')" :rules="[
					 { required: true, errorMessage: $t('pages.petInfo.error_gender_required') },
					]" required name="gender" class="section-item">
					<uni-easyinput :clearable="false" @iconClick="chooseGender" disabled :inputBorder="false" v-model="formData.genderText"
                        :placeholder="$t('pages.petInfo.placeholder_gender')" suffixIcon="right"/>
				</uni-forms-item>
				<uni-forms-item :label="$t('pages.petInfo.label_Age')" :rules="[
					 { required: true, errorMessage: $t('pages.petInfo.error_age_required') },
					 { pattern:  /^\d+\.?\d*$/,errorMessage: $t('pages.petInfo.error_age_pattern') },
					]" required name="age" class="section-item">
					<uni-easyinput :clearable="false" :inputBorder="false" v-model="formData.age" :placeholder="$t('pages.petInfo.placeholder_age')" />
				</uni-forms-item>
				<uni-forms-item :label="$t('pages.petInfo.label_Weight')" :rules="[
					 { required: true, errorMessage: $t('pages.petInfo.error_weight_required') },
					 { pattern:  /^\d+\.?\d*$/,errorMessage: $t('pages.petInfo.error_weight_pattern') },
					]" required name="weight" class="section-item">
					<uni-easyinput :clearable="false" :inputBorder="false" v-model="formData.weight" :placeholder="$t('pages.petInfo.placeholder_weight')" />
				</uni-forms-item>
			</uni-forms>
		</view>
		
		<view class="bottom-box">
		    <up-button @click="submit" :text="$t('pages.petInfo.submit_btn')" size="normal" type="primary" 
                style="width: 600rpx;" shape="circle"></up-button>
		</view>
	</view>
</template>

<script setup>	
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import { chooseAndUploadPortrait, } from '@/utils/upload';
	import { navigateBack, CacheUtils, navigateToUniPage, } from '@/utils/index';
	import {
		addChongWuApi,
		getChongWuDetailsApi,
		channgeChongWuApi
	} from "@/api/request";
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
    import { useI18n } from 'vue-i18n';
    import { PET_TYPE_EN_ENUM, PET_TYPE_ZH_SIMPLE_ENUM, PET_TYPE_ZH_TRADITION_ENUM, 
        GNDER_EN_ENUM, GNDER_ZH_SIMPLE_ENUM, GNDER_ZH_TRADITION_ENUM, } from '@/utils/enum';

    const { t } = useI18n();
	const isEdit = ref(false);
	const valiForm = ref(null);
    const lang = uni.getLocale();

	const formData = reactive({
		id: '',
		nickName: '',
		breed: '',
        breedText: '',
		gender: '',
        genderText: '',
		age: '',
		weight: '',
		avatar: '/static/images/user/shexiangji.png',
	});

    // 获取对应语言下的性别映射
    let genderMap = {};
    switch(lang){
        case 'en': genderMap = GNDER_EN_ENUM;break;
        case 'zh-Hans': genderMap = GNDER_ZH_SIMPLE_ENUM;break;
        case 'zh-Hans': genderMap = GNDER_ZH_TRADITION_ENUM;break;
        default: genderMap = GNDER_EN_ENUM;
    }

    // 获取对应语言下的物种映射
    let breedMap = {};
    switch(lang){
        case 'en': breedMap = PET_TYPE_EN_ENUM;break;
        case 'zh-Hans': breedMap = PET_TYPE_ZH_SIMPLE_ENUM;break;
        case 'zh-Hans': breedMap = PET_TYPE_ZH_TRADITION_ENUM;break;
        default: breedMap = GNDER_EN_ENUM;
    }
		
	const chooseGender = ()=>{
		const selectList = Object.values(genderMap);
		uni.showActionSheet({
			itemList: selectList,
			success: function (res) {
				formData.genderText = selectList[res.tapIndex];
				formData.gender = Object.keys(genderMap)[res.tapIndex];
			},
			fail: function (res) {
				console.log(res.errMsg);
			}
		});
	}
	
	const chooseBreed = ()=>{
		const selectList = Object.values(breedMap);
		uni.showActionSheet({
			itemList: selectList,
			success: function (res) {
				formData.breedText = selectList[res.tapIndex];
				formData.breed = Object.keys(breedMap)[res.tapIndex];
			},
			fail: function (res) {
				console.log(res.errMsg);
			}
		});	
	}
	
	const changeHeadImg = async ()=>{
		const result = await chooseAndUploadPortrait();
		formData.avatar = result.filepath||'';
	}
	
	const getDetailInfo = ()=>{
		getChongWuDetailsApi(formData.id).then(res=>{
			formData.avatar = res.data.deviceimg||formData.avatar;
			formData.gender = res.data.sex||'';
            formData.genderText = genderMap[formData.gender]||"";
			formData.nickName = res.data.nickname||'';
			formData.breed = res.data.pingzhong||'';
			formData.breedText = breedMap[formData.breed]||'';
			formData.age = res.data.age||'';
			formData.weight = res.data.tizhong||'';
		});
	}
	
	const submit = ()=>{
		valiForm.value.validate().then(res=>{
			if(isEdit.value){
				channgeChongWuApi({
					id: formData.id,
					imei: '',
					title: 'default',
					avatar: formData.avatar,
					sex: formData.gender,
					nickname: formData.nickName,
					type: formData.breed,
					age: formData.age,
					tizhong: formData.weight,
				}).then(()=>navigateBack());
			}else{
				addChongWuApi({
					imei: '',
					title: 'default',
					avatar: formData.avatar,
					sex: formData.gender,
					nickname: formData.nickName,
					type: formData.breed,
					age: formData.age,
					tizhong: formData.weight,
				}).then(()=>navigateBack());
			}			
		}).catch(err =>{
			
		})
	}

	onLoad((options) => {
		if (options.type == 'edit') {
			isEdit.value = true;
			formData.id = options.id;
			uni.setNavigationBarTitle({
				title: t('pages.petInfo.titleEdit')
			});
			getDetailInfo();
		}
	})
	
</script>

<style lang="scss" scoped>
$bottom-box-height: 100rpx;
.page-wrapper {
    background: #F8FAFC;
    position: relative;
    padding-bottom: $bottom-box-height;
    box-sizing: border-box;

    .bottom-box {
		background-color: #FFFFFF;
        bottom: 0rpx;
        left: 0rpx;
        right: 0rpx;
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        height: $bottom-box-height;
        box-sizing: border-box;
    }
}	
	
.form{
	margin: 60rpx 40rpx;
	background-color: #fff;
	border-radius: 30rpx;
	padding: 20rpx 40rpx;
}

.section-item{
	border-bottom: 1px dotted #F8F7F2;
}

.avatar-box{
	margin: 80rpx auto 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 300rpx;
	row-gap: 6rpx;
	.image{
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
	}	
}

:deep(.uni-forms-item__label){
	width: 180rpx;
}

:deep(.uni-input-input:disabled){
	
}
:deep(.is-disabled .uni-easyinput__content-input){
	background-color: #FFFFFF !important;
}
:deep(.is-disabled){
	background-color: #FFFFFF !important; 
}
</style>